JSONデータを見やすい形にする-json.human.js

JSONデータを見やすく表示する

最近はすっかり見慣れた形式であるJSONですが、見慣れていない人にとってはどういう構造になっていて、
何を表しているのか少々わかりづらい感があります。

{
  "name" : "taro",
  "email" : "[email protected]",
  "job":  "programmer",
  "language" : ["Java","Javascript","Ruby"],
  "address" : {
    "country" : "Japan",
    "city" : "Tokyo"
  }
}

今回紹介する、json.human.jsを使用すると、JSON形式の文字列を、テーブルを使用して
見やすい形にしたhtmlデータを出力してくれます。
次のようにbowerを使えば簡単にインストールできます。

% bower install json-human --save

htmlに組み込んで使ってもいいのですが、、ここでテキストエリアにJSONを入力すれば結果を見れるので、使ってみましょう。

Input: JSON欄に先ほどのJSONを入力し、Convertボタンをクリックします。
すると、図のように視覚化されたJSONデータと、そのraw　htmlデータが表示されます。

まとめ

自分のアプリで使用する場合でも、JsonHuman.format関数で文字列を変換するだけなので簡単です。

参考サイトなど

• Github: https://github.com/marianoguerra/json.human.js
• デモ: http://marianoguerra.github.io/json.human.js/